<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    // 阻止F5刷新
    stopF5 () {
      let that = this
      document.onkeydown = function (e) {
        let evt = window.event || e
        let code = evt.keyCode || evt.which
        if (code === 116) {
          if (evt.preventDefault) {
            evt.preventDefault()
            console.log('F5按下', that.$router)
          } else {
            evt.keyCode = 0
            evt.returnValue = false
          }
        }
      }
    }
  },
  created () {
    // 全局阻止F5刷新，如果F5页面刷新就是重新获取数据
    this.stopF5()
    // 这里解决页面刷新的时候vuex的state的内容会丢失的问题
    // 在页面创建的时候把VUEX的值放入localStorage
    if (localStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, JSON.parse(localStorage.getItem('store'))))
    }
    // 在页面刷新的时候把store内的信息转成json字符串传递进localstorage
    window.addEventListener('beforeunload', () => {
      sessionStorage.removeItem('path')
      localStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}
</script>

<style>
body, html, #app {
  width: 100%;
  height: 100%;
}
</style>
